<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../../mui/css/icons-extra.css" />
	</head>
	<body>
		<header class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<footer>
			<div class="mui-row">
				<a class="footer-item mui-col-xs-4" href="#tabbar">
					<span class="mui-icon-extra mui-icon-extra-heart "></span>
					<span class="mui-tab-label item">收藏</span>
				</a>
				<a class="footer-item mui-col-xs-4" id="shopCart">
					<span class="mui-icon-extra mui-icon-extra-cart"><span id="badge" class="mui-badge mui-badge-danger"></span></span>
					<span class="mui-tab-label item">购物车</span>
				</a>
				<a class="footer-item mui-col-xs-4" style="background-color:  #FF5053;">
					<button id="dangerbtn" type="button" class="footer-btn-red">加入购物车</button>
				</a>
			</div>
		</footer>

		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="imagesDiv">
					
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<ul class="mui-table-view mui-grid-view">
				<textarea class="index-textarea mui-h5 " readonly="readonly" id = "title"></textarea>
				<font id = "price"></font>
			</ul>

			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						商品介绍
					</a>
					<a class="mui-control-item" href="#item2mobile">
						商品属性
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<ul class="mui-table-view" id="introduction">
						</ul>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" >
								计价单位：
							</li>
							<li class="mui-table-view-cell">
								品牌：
							</li>
							<li class="mui-table-view-cell">
								功效：
							</li>
							<li class="mui-table-view-cell">
								规格：
							</li>
							<li class="mui-table-view-cell">
								上架时间：
							</li>
							<li class="mui-table-view-cell">
								产地：
							</li>
							<li class="mui-table-view-cell">
								保质期：
							</li>
							<li class="mui-table-view-cell">
								产品成分：
							</li>
							<li class="mui-table-view-cell">
								保质方法：
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../../mui/js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/ajax-common.js"></script>	
	<script src="../../../js/jquery-2.1.1.min.js"></script>
	<script>
		mui.init({
			swipeBack: false
		});
		mui.ready(function(){
			var goodsId = window.localStorage.goodsId;
			var addShop=window.localStorage.addShop;
			var url = "goods/detail/"+goodsId;
			var success = function(response) {
				var size = response.size;
				var goodsImages = response.goodsImages;
				var goodsInfo = response.goods;
				setImages(goodsImages);
				setGoods(goodsInfo);
				/*设置购物车商品的个数*/
				setSize(size);
			};
			ajaxFunc(url, success);
		})
		
		/* 设置图片轮番信息 */	
		function setImages(goodsImages){
			var imageHtml ="";
			if(goodsImages){
				imageHtml = imageHtml + setImageUrl(goodsImages[goodsImages.length-1].imageUrl);
				for(key in goodsImages){
					imageHtml = imageHtml + setImageUrl(goodsImages[key].imageUrl);
				}
				imageHtml = imageHtml + setImageUrl(goodsImages[0].imageUrl);
			}
			$('#imagesDiv').html(imageHtml);
			//定时轮播
			var slider = mui("#slider");
			slider.slider({
				interval: 5000
			});	
		}
		
		function setImageUrl(url){
			var imageDiv = '<div class="mui-slider-item mui-slider-item-duplicate"><a><img src="'+imageCxt+url
			+'" class = "index-advert-image"></a></div>';
			return imageDiv;
		}
		/* 设置商品信息 */
		function setGoods(goodsInfo){
			$('#introduction').html(goodsInfo.introduction);
			$('#title').val(goodsInfo.title);
			$(price).text(goodsInfo.salePrice);
		}
		/*设置购物车商品的个数*/
		function setSize(size){
			//console.log("size"+size);
			$('#badge').html(size);
		}
		/*点击购物车*/
		document.getElementById("shopCart").addEventListener("tap",function(){
			mui.openWindow({
				id:'cart',
				url:'../cart/cart.html'
			});
		});
		/**/
		document.getElementById("dangerbtn").addEventListener("tap",function(){
			var num=0;
			var goodsId = window.localStorage.goodsId;
			var url="cart/add/a"+"/"+num+"/"+goodsId;
			var success = function(response) {
				window.localStorage.addShop = "b";
				var size = response.size;
				setSize(size);
				mui.toast("添加成功，在购物车等候！");
			};
			ajaxFunc(url, success);
		});
	</script>

</html>